<template>
  <el-card style="margin:15px 25px 80px 10px">
    <template #header  v-if="route.query.name">
      <el-breadcrumb
        :separator-icon="ArrowRight"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <div class="head" style="display:flex;justify-content: space-between;">
      <div class="big" style="display:flex">
      <div class="one">
        <span style="margin-right:10px">目录名称</span>
        <el-input v-model="input" style="width:200px"/>
      </div>
      <div class="two" style="margin-left:20px">
          状态：<el-select
            v-model="selectValue"
            filterable
            placeholder="Select"
            style="width:200px"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            style="margin-left:10px"
            @click="clear"
          >清除</el-button>
          <el-button type="primary"  @click="submitForm">搜索</el-button>
        </div>
      </div>
      <div class="three">
        <!-- <div style="color:#97b1ff" class="backIcon"> -->
          <!-- <el-icon><Back /></el-icon> -->
          <!-- 返回学科 -->
        <!-- </div> -->
          <span style="margin:0 10px;color:#7fb1ff;cursor: pointer;display: inline-block;" @click="$router.push('/subjects/list')" v-if="$route.query.id">
            <el-icon><Back/></el-icon>返回学科
          </span>
          <el-button type="success" style="width:100px;color: white;" @click="changeSet('')">
          <el-icon style="vertical-align: middle;color: white;">
            <EditPen style="color: white;" />
          </el-icon>
          新增目录</el-button>
      </div>
    </div>
    <div class="text" style="margin-top:10px">
      <el-alert type="info" show-icon :title="'数据一共'+list.counts+'条'">
      </el-alert>
    </div>
    <div class="dataList">
    <el-table :data="list.items" style="width: 100%">
      <el-table-column prop="id" label="序号" width="120"></el-table-column>
      <el-table-column prop="subjectName" label="所属学科" width="150"></el-table-column>
      <el-table-column prop="tagsName" label="标签名称" width="150">
      </el-table-column>
      <el-table-column prop="creatorID" label="创建者" width="120"></el-table-column>
      <el-table-column prop="addDate" label="创建日期" width="200">
        <template v-slot="{row}">{{parseTimeByString(row.addDate)}}</template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="150">
        <template v-slot="{row}">{{row.state===1?'已启用':'已禁用'}}</template>
      </el-table-column>
      <el-table-column prop="actions" label="操作" width="200">
        <template v-slot="{row}">
          <el-button type="primary" size="50" plain text @click="changStatus(row.id,row.state)">{{row.state == 1? '禁用':'启用'}}</el-button>
            <el-button type="primary" size="50" style="margin:0;padding: 0;" plain text :disabled="row.state == 1" @click="changeSet(row.id,row)">修改</el-button>
           <el-button  type="primary" size="50" style="margin:0" plain text @click="delTags(row.id)" :disabled="row.state == 1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="pageBox">
      <div class="pagination">
        <el-pagination
          v-model:current-page="page.page"
          v-model:page-size="page.pagesize"
          :page-size="[5,10,20,50]"
          :pager-count="5"
          layout="prev, pager, next, sizes, jumper"
          :total="list.counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
</el-card>
<tagsAdd :inheritAttrs="inheritAttrs" @update:dialogVisible="inheritAttrs=false" :showId="showId" ref="formData" @getList="getTagsList({...page,subjectID:route.query.id || undefined})"></tagsAdd>
</template>

<script>
import { ArrowRight, EditPen } from '@element-plus/icons-vue'
import tagsAdd from '@/module-hmmm/components/tags-add'
import { status } from '@/api/hmmm/constants'
import { changeState, list as tagsList, remove, simple as simpleList } from '@/api/hmmm/tags.js'
import { onMounted, reactive, ref, watch } from 'vue'
import { parseTimeByString } from '@/filters/index.js'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
  name: 'DirectoryPage',
  components: {tagsAdd},
  setup () {
    const inheritAttrs = ref(false)
    const formData = ref()
    const showId = ref(undefined)
    const route = useRoute()
    const router = useRouter()
    const list = ref([])
    const selectValue = ref(undefined)
    const input = ref(undefined)
    const options = [
      {
        selectValue: '启用',
        label: '启用'
      },
      {
        selectValue: '禁用',
        label: '禁用'
      }]
    const page = reactive({
      page: 1,
      pages: 2,
      pagesize: 10
    })
      //搜索按钮
      const submitForm =() => {
        getTagsList({...page,tagName:input.value,state:selectValue.value})
      }
    // 每页显示信息条数
    const sizeChange = (val) => {
      page.pagesize = val
      getTagsList(page)
    }
    // 当前页码改变时触发
    const handleCurrentChange = (val) => {
      page.page = val
      getTagsList(page)
    }
    // 获取数据列表
    async function getTagsList (page) {
      const res = await tagsList(page)
      list.value = res.data
      console.log(res)
    }
    function clear () {
      input.value = undefined
      selectValue.value = undefined
    }
      // 修改状态
  async function changStatus(id,state){
      if(state == 1){
          await changeState({id,state:0})
          getTagsList()
      }else{
        await changeState({id,state:1})
        getTagsList()
      }
  }
    // 修改弹窗
    async function changeSet(id,row){
    inheritAttrs.value = true
    showId.value = id
    if(id){
      formData.value.showId = id
    }
    if(row){
      formData.value.formData = {subjectID:row.subjectID,tagName:row.tagName,showId:row.id}
    }else{
      formData.value.formData = { subjectID: undefined,tagName: undefined,}
    }
  }
    //删除
    async function delTags(id){
    ElMessageBox.confirm('此操作将永久删除该题目' + ', 是否继续?', '提示', {type: 'warning'}).then(() => {
        remove({id})
            .then((response) => {
              ElMessage.success('删除成功' + '!')
              getTagsList(page)
            })
        }).catch(() => {})
  }
    onMounted(() => {
      getTagsList({...page,subjectID:route.query.id || undefined})
    })
    watch(()=>route.query,(val)=>{
      getTagsList(page)
    },{immediate:true})
    return {
      directors: [],
      subjects: [],
      selectValue,
      input,
      changStatus,
      list,
      delTags,
      page,
      route,
      status,
      router,
      changeSet,
      inheritAttrs,
      submitForm,
      showId,
      tagsList,
      formData,
      sizeChange,
      handleCurrentChange,
      options,
      clear,
      getTagsList,
      parseTimeByString
    }
  }
}
</script>
<style scoped lang="less">
.container{
  display: flex;
  flex-direction: column;
  .titleBox{
  height: 50px;
  .title{
    line-height: 50px;
    margin: 15px 0 15px 0px;
    font-size: 15px;
  }
}
  .head{
    .big{
      float: left;
      .one{
        float:left;
      }
      .two{
        float:right;
        margin-left: 60px;
      }
    }
    .three{
      float:right
    }
  }
  .text{
    width: 1090px;
    height: 20px;
    margin-top: 20px;
    background-color: #f4f4f5;
    color: #909fc0;
    line-height: 20px;
    font-size: 13px;
  }
  .dataList{
    margin-top: 20px;
        .span{
      cursor: pointer;
      color: #6bc7ff;
    }
  }
  .pageBox{
    position: relative;
    height: 35px;
    margin-top: 15px;
    .pagination{
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
